<template>
  <div class="commonUtil page-container mini-padding">
    <h1 class="mini-margin">其它常用方法</h1>
    <pre>
  <a-button type="primary" class="mini-margin" @click="testDebounce" >防抖函数(500毫秒内重复点击无效): 点击数字+1  {{number}}</a-button>
      函数防抖，就是指触发事件后，在 n 秒内函数只能执行一次，如果触发事件后在 n 秒内又触发了事件，则会重新计算函数延执行时间。
      使用场景：浏览器页面onresize，scroll，mousemove ,mousehover 等，会被频繁触发（短时间内多次触发）的时候就需要用到防抖，或者某些点击事件，防止多次点击造成频繁请求后台。
      <h4>   使用示例</h4>
      CommonUtil.debounce(() => {}, 10, true)
    </pre>
    <pre>
  <a-button type="primary" class="mini-margin" @click="testThrottle" >节流函数(500毫秒内只触发一次): 点击数字+1  {{number2}}</a-button>
      函数节流,就是指触发事件后，在n秒内函数只能执行一次，如果触发事件后在n秒内又触发了事件，则会再次执行该事件
      使用场景：浏览器页面onresize，scroll，mousemove ,mousehover 等，会被频繁触发（短时间内多次触发）的时候就需要用到节流，例如浏览器发生滚动事件时，每3秒或5秒执行一次事件。
      <h4>   使用示例</h4>
      CommonUtil.debounce(() => {}, 10, true)
    </pre>
    
    <pre>
  <a-button type="primary" class="mini-margin">深拷贝</a-button>
      深拷贝是指，拷贝对象的具体内容，二内存地址是自主分配的，拷贝结束之后俩个对象虽然存的值是一样的，但是内存地址不一样，俩个对象页互相不影响，互不干涉
      <h4>   使用示例</h4>
      CommonUtil.deepClone(obj)
    </pre>

    <a-button type="primary" class="mini-margin">获取指定区间的随机整数{{  CommonUtil.getRandomInt(0, 200) }}</a-button>
    <a-button type="primary" class="mini-margin" @click="CommonUtil.exportExcel([{a: 1}, {b: 2}], 'test')"> 数组内容导出excel</a-button>
    <a-button type="primary" class="mini-margin" >isJSON {{ CommonUtil.isJSON('a: {}') }}</a-button>
    <a-button type="primary" class="mini-margin" @click="CommonUtil.setLocalStorage( 'test', [{a: 1}, {b: 2}])">设置localStorage</a-button>
    <a-button type="primary" class="mini-margin" @click="CommonUtil.getLocalStorage('test')">获取localStorage</a-button>
    <pre>
      <h4>   使用示例</h4>
      CommonUtil.getRandomInt(0, 200)
      CommonUtil.exportExcel([{a: 1}, {b: 2}], 'test')
      CommonUtil.isJSON('a: {}')
      CommonUtil.setLocalStorage( 'test', [{a: 1}, {b: 2}])
      CommonUtil.getLocalStorage('test')
    </pre>
  </div>
</template>

<script lang='ts' setup>
import { CommonUtil } from '@/utils';
import { ref } from 'vue';
let number = ref(1)
let number2 = ref(1)

const testDebounce = CommonUtil.debounce(() => {
      number.value++
}, 500, false)

const testThrottle = CommonUtil.throttle(() => {
  number2.value++
}, 500, {})
</script>

<style scoped lang='scss'>
  .commonUtil{}
</style>